<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="moudle/layui/css/layui.css"/>
</head>
<body style="background-color: #F2F2F2;">
<div class="layui-header header" style="background-color: #1E9FFF!important;">
    <div style="display: inline-block;position: absolute;top: 5px;left: 40px ">
        <h1 style="color: white; font-size: 35px">懿梦千寻</h1>
    </div>
    <ul class="layui-nav layui-bg-blue" style="right: 0; position: absolute;">
        <li class="layui-nav-item layui-this"><a href="index.html">首页</a></li>
        <li class="layui-nav-item"><a href="donate.html">爱心捐赠</a></li>
        <li class="layui-nav-item"><a href="robot.html">联系客服</a></li>
        <li class="layui-nav-item"><a href="">关于我们</a></li>
    </ul>
</div>
<div style="padding: 20px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" id="totalAmountCard" style="min-height: 270px">
                <div class="layui-card-header">爱心捐赠总金额</div>
                <div style="font-family: Impact;">
                    <span style="font-size: 35px;font-family: DFPKingGothicGB-Medium,sans-serif;color: rgb(194,53,49)"><center>爱心捐赠总金额为:</center></span>
                    <center id="totalAmount" style="font-size: 120px;color: rgb(194,53,49)"></center>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card" style="min-height: 300px">
                <div class="layui-card-header">最近七日的捐赠情况</div>
                <div id="recentDonateChart"></div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script src="moudle/layui/layui.all.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    $(function () {
        $("body").height($(window).height());
        $("#totalAmountCard").height($(window).height() / 3);
        $("#recentDonateChart").height($(window).height() / 3);

        getTotalAmount();
        getRecentSevenDonate();
    });

    function getTotalAmount() {
        $.ajax({
            url: "/donate/index/totalAmount",
            type: "POST",
            success: function (result) {
                if (result.success) {
                    $("#totalAmount").numberRock({
                        lastNumber: parseInt(result.body.data0),
                        duration: 1000,
                        easing: 'swing'
                    });
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (result) {
                console.log(result);
            }
        });
    }

    // 获取最近七天捐款详情
    function getRecentSevenDonate() {
        $.ajax({
            url: "/donate/index/recentSevenDonate",
            type: "POST",
            success: function (result) {
                console.log(result);
                if (result.success) {
                    var recentDonateChart = echarts.init(document.getElementById('recentDonateChart'));
                    var option = {
                        tooltip : {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data:['当日总金额','捐赠笔数']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : $.map(result.body.data0, function (row) {
                                    return row.xAxis;
                                })
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'当日总金额',
                                type:'line',
                                smooth: true,
                                areaStyle: {},
                                data: $.map(result.body.data0, function (row) {
                                    return row.yAxis;
                                })
                            },
                            {
                                name:'捐赠笔数',
                                type:'line',
                                smooth: true,
                                areaStyle: {},
                                data: $.map(result.body.data0, function (row) {
                                    return row.yAxis2;
                                })
                            }
                        ]
                    };

                    recentDonateChart.setOption(option);
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (result) {
                console.log(result);
            }
        });
    }

    (function ($) {
        $.fn.numberRock = function (options) {
            var defaults = {
                lastNumber: 0,
                duration: 1000,
                //swing(默认 : 缓冲 : 慢快慢)  linear(匀速的)
                easing: 'swing'
            };
            var opts = $.extend({}, defaults, options);
            $(this).animate({
                num: "numberRock",
            }, {
                duration: opts.duration,
                easing: opts.easing,
                complete: function () {
                    console.log("success");
                },
                step: function (a, b) {
                    // 可以检测我们定时器的每一次变化
                    $(this).html(parseInt(b.pos * opts.lastNumber));
                }
            });
        }
    })(jQuery);
</script>
</html>